<template>
  <aside class="sidebar">
    <!--          个人信息卡片-->
    <el-card>
      <div class="profile-card">
        <div class="avatar-location">
          <el-avatar :size="150" :src="userStore.user.avatar_url || avatarImg"/>
        </div>
        <div class="info-section">
          <template v-if="userStore.isLogin">
            <el-row :gutter="20">
              <el-col :span="12">
                <p>用户名：{{ userStore.user.username }}</p>
                <p>昵称：{{ userStore.user.nickname }}</p>
                <p>邮箱：{{ userStore.user.email }}</p>
              </el-col>
              <el-col :span="12">
                <p>简介：{{ userStore.user.biography }}</p>
                <p>电话：{{ userStore.user.phone }}</p>
                <p>上次登录：{{ userStore.user.last_login }}</p>
              </el-col>

            </el-row>
            <div class="button-group">
              <el-button type="primary" @click="$router.push({ name: 'UserCenter' })">个人中心</el-button>
              <el-button type="danger" @click="handleLogout">退出登录</el-button>
            </div>
          </template>
          <template v-else>
            <el-link type="primary" @click="$router.push({ name: 'Login' })" class="button-login">
              请登录查看个人信息
            </el-link>
          </template>
        </div>
      </div>
    </el-card>

    <!--    分类卡片-->
    <el-card class="sidebar-card">
      <h3>分类</h3>
      <el-skeleton v-if="categoryStore.loading" :rows="5" animated/>
      <el-alert v-if="categoryStore.error" title="加载失败" type="error" show-icon/>
      <div class="two-list">
        <router-link
            v-for="category in categoryStore.categories"
            :key="category.id"
            :to="`/categories/${category.id}/${category.slug}/`"
            class="category-link"
            type="default">
          {{ category.name }}
        </router-link>
      </div>

    </el-card>

    <!--    Tags卡片-->
    <el-card>
      <h3>标签</h3>
      <el-skeleton v-if="tagStore.loading" :rows="5" animated/>
      <el-alert v-if="tagStore.error" title="加载失败" type="error" show-icon/>

      <div class="two-list">
        <router-link
            v-for="tag in tagStore.tags"
            :key="tag.id"
            :to="`/tags/${tag.id}/${tag.slug}`"
            class="category-link"
            type="default">
          {{ tag.name }}
        </router-link>
      </div>

    </el-card>

  </aside>
</template>
<script setup>
import {onMounted} from 'vue'
import {ElMessage} from "element-plus";

import avatarImg from '@/assets/avatar.jpg';
import {useUserStore} from '@/stores/user'
import {useCategoryStore} from '@/stores/category'
import {useTagStore} from "@/stores/tag.js";

const userStore = useUserStore()
const categoryStore = useCategoryStore()
const tagStore = useTagStore()


onMounted(() => {
  // 获取个人信息
  userStore.fetchUserInfo()
  // 获取分类卡片信息
  categoryStore.fetchCategories()
  // 获取标签卡片信息
  tagStore.fetchTags()
});

const handleLogout = () => {
  userStore.logout()
  ElMessage.success("已退出登录")
}


</script>
<style scoped>
/* 侧边栏 */

.sidebar {
  width: 20%;
}


.two-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列 */
  gap: 8px 16px; /* 行间距8px，列间距16px */
}


/* 个人信息卡片 */
.avatar-location {
  display: flex;
  justify-content: center;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.button-login {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}


/*  分类卡片*/
.sidebar-card {
  margin: 5px 0;
}

.category-link {
  display: block;
  color: #8b4513 !important;
}
</style>